<template>
    <div class="query-color">
        <div class="query-search" >
            <div class="block" >
                <span class="demonstration">地点：</span>
                <el-cascader style="width: 300px"
                             placeholder="地点"
                             :options="options"
                             filterable
                             clearable></el-cascader>
            </div>
            <el-divider class="divider"></el-divider>
            <div class="block2">
                <span class="demonstration">行业：</span>
                <el-cascader style="width: 300px"
                             placeholder="行业"
                             :options="options2"
                             filterable
                             clearable
                            ></el-cascader>
            </div>
            <el-divider class="divider"></el-divider>
            <div class="block3">
                <span class="demonstration">月薪：</span>
                <el-radio-group v-model="pay">
                    <el-radio :label="1" value="1">不限</el-radio>
                    <el-radio :label="2" value="2">1k以下</el-radio>
                    <el-radio :label="3" value="3">2k-4k</el-radio>
                    <el-radio :label="4" value="4">4k-6k</el-radio>
                    <el-radio :label="5" value="5">6k-8k</el-radio>
                    <el-radio :label="6" value="6">10k-15k</el-radio>
                    <el-radio :label="7" value="7">15k以上</el-radio>
                </el-radio-group>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pay:1,
                options: [{
                    value: '广东',
                    label: '广东',
                    children: [{
                        value: '广州',
                        label: '广州',
                        children: [{
                            value: '番禺',
                            label: '番禺'
                        }, {
                            value: '天河',
                            label: '天河'
                        }]
                    }, {
                        value: '东莞',
                        label: '东莞',
                        children: [{
                            value: '石龙',
                            label: '石龙'
                        }, {
                            value: '东城',
                            label: '东城'
                        }]
                    }]
                }],
                options2: [{
                    value: 'IT/互联网',
                    label: 'IT/互联网',
                    children: [{
                        value: '计算机软件',
                        label: '计算机软件',
                    }, {
                        value: '网络游戏',
                        label: '网络游戏',
                    }]
                },{
                    value: '服务业',
                    label: '服务业',
                    children:[{
                        value:'酒店',
                        label:'酒店'
                    },{
                        value:'旅游',
                        label:'旅游'
                    }]
                }]
            }
        },
        methods: {
        }
    };
</script>
<style>

    .block,.block2,.block3 {
        text-align: left;
        margin-left: 5%;
    }

    .query-search{
        margin-top: 20px;
        padding-top: 20px;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
        background-color: white;
        width:1100px;
        /*margin-left: 15%;*/
        height: 250px;
    }

    .query-color{
        display: flex;
        flex-direction: row;
        justify-content: center;

        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        background-color: #F3F5F8;

    }
</style>
